<template>
  <div class="refund-records-list">
    <el-table
      :data="records"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="refund_no" label="退款单号" min-width="150" />
      <el-table-column label="退款金额" width="100" align="center">
        <template slot-scope="{row}">
          ¥{{ formatAmount(row.refund_amount) }}
        </template>
      </el-table-column>
      <el-table-column label="退款状态" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="退款原因" min-width="150" />
      <el-table-column prop="wx_refund_id" label="微信退款ID" min-width="180" />
      <el-table-column label="申请时间" width="160" align="center">
        <template slot-scope="{row}">
          {{ formatDate(row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column v-if="showActions" label="操作" width="120" align="center">
        <template slot-scope="{row}">
          <el-button
            v-if="row.status === 0 || row.status === 1"
            size="mini"
            type="primary"
            @click="$emit('query-status', row)"
          >
            查询状态
          </el-button>
          <el-button
            size="mini"
            type="info"
            @click="$emit('view-order', row)"
          >
            查看订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="showPagination && total > 0" class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils';

export default {
  name: 'RefundRecordsList',
  props: {
    records: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '退款记录'
    },
    showActions: {
      type: Boolean,
      default: true
    },
    showPagination: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return '-';
      return formatDate(date);
    },
    formatAmount(amount) {
      if (amount === undefined || amount === null) return '0.00';
      return parseFloat(amount).toFixed(2);
    },
    getStatusType(status) {
      const statusMap = {
        0: 'info',
        1: 'warning',
        2: 'success',
        3: 'danger'
      };
      return statusMap[status] || 'info';
    },
    getStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '处理中',
        2: '退款成功',
        3: '退款失败'
      };
      return statusMap[status] || '未知状态';
    },
    handleSizeChange(size) {
      this.$emit('size-change', size);
    },
    handleCurrentChange(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>

<style scoped>
.refund-records-list {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.empty-data {
  text-align: center;
  padding: 30px 0;
  color: #909399;
  font-size: 14px;
}
</style>
